<template>
  <div class="product-list-container">
    <div v-if="products.length === 0" class="empty-list">
      <ShoppingOutlined class="empty-icon" />
      <p>没有找到相关商品</p>
    </div>

    <div class="product-grid">
      <a-card 
        v-for="product in products" 
        :key="product.productId" 
        class="product-card"
        :bordered="false"
        hoverable
        @click="handleProductClick(product)"
      >
        <div class="product-image-container">
          <img 
            :src="product.mainImage" 
            :alt="product.productName"
            class="product-image"
          >
        </div>
        
        <div class="product-info">
          <h4 class="product-name">{{ product.productName }}</h4>
          
          <div class="product-meta">
            <span class="product-price">¥{{ product.price.toFixed(2) }}</span>
          </div>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ShoppingOutlined } from '@ant-design/icons-vue';

interface Product {
  productId: number;
  productName: string;
  price: number;
  mainImage: string;
  sales?: number;
  rating?: number;
  detailImage?: string;
}

const props = defineProps<{ products: Product[] }>();

const emit = defineEmits<{ (e: 'product-view', product: Product): void }>();

const handleProductClick = (product: Product) => {
  emit('product-view', product);
};
</script>

<style scoped>
.product-list-container { width: 100%; }
.empty-list { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: #999; text-align: center; }
.empty-icon { font-size: 48px; color: rgba(255, 255, 255, 0.2); margin-bottom: 16px; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.product-card { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 12px !important; transition: all 0.3s !important; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; }
.product-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important; }
.product-image-container { position: relative; padding-top: 100%; overflow: hidden; }
.product-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.product-card:hover .product-image { transform: scale(1.05); }
.product-info { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.product-name { margin: 0 0 12px 0 !important; color: #fff !important; font-size: 16px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; flex: 1; }
.product-meta { display: flex; justify-content: space-between; align-items: center; }
.product-price { color: #ff4757; font-weight: 600; font-size: 16px; }
@media (max-width: 768px) { .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } }
</style>


